<template>
	<view class="content">
		<gameBasics />
		<view style="display: flex;width: 75vw;margin: 0 auto;height: 100%;">
			<view class="left">
				<flipcountdown :propsType="2" :endTime="endTime" style="margin: 0 auto;" value="00:00:00"
					:autoplay="autoplay" @getTimeOut="getTimeOut" zoom=".7"/>
				<view :class="cooling||game_config.status_pop||userPeople.cap_zt!=2?'btn btn_':'btn'" @click="setFormShow(1)">
					{{userPeople.cap_zt!=2?'挑战中':game_config.status_pop?'答题中':cooling||resultShow?'冷却中':'抢答'}}
				</view>
				<view class="form" :style="{opacity:formShow?'':'0'}">
					<input type="text" v-model="answerText" :disabled="!formShow">
					<view class="submit" @click="submit">
						提交
					</view>
					<view class="time">
						{{num}}s
					</view>
				</view>
				<!-- <view class="turntable" style="display: flex;align-items: center;bottom:calc(60vmin / 7.5);position: fixed;" v-if="!formShow">
				    <view class="record">
				      <view class="inner"></view>
				    </view>
				    <view class="overlay"></view>
				    <view class="arm-holder">
				      <view class="arm"></view>
				    </view>
				    <view class="dial"></view>
				  </view> -->
				<!-- 				<view class="" style="display: flex;align-items: center;bottom:calc(60vmin / 7.5);position: fixed;" v-if="!formShow">
					<view class="container">
						<view class="one"></view>
						<view class="two"></view>
						<view class="three"></view>
						<view class="four"></view>
						<view class="five"></view>
					</view>
				</view> -->



			</view>

			<view class="right">
				<view class="team_item" v-for="(item ,index) in gameChall">
					<image :src="item.team.pic" mode="aspectFill"></image>
					<view class="name">
						{{item.team.title}}
					</view>
					<view class="score">
						{{item.number||0}}分
					</view>
				</view>
			</view>


		</view>
		<u-popup :show="resultShow" @close="close" mode="center" round="calc(20vmin / 7.5)">
			<view class="popup_" >
				<image class="bg" src="../../static/gameImg/answerCorrect.png" mode="aspectFill"></image>
				<u-icon v-if="answerCode" name="checkmark-circle-fill" color="#65CF93" size="calc(240vmin / 7.5)"
					top="calc(80vmin / 7.5)"></u-icon>
				<u-icon v-else name="close-circle-fill" color="#FF5A5A" size="calc(240vmin / 7.5)"
					top="calc(80vmin / 7.5)"></u-icon>

				<view class="answerText" :style="{color:answerCode?'#65CF93':'#FF5A5A'}">
					{{answerCode?'回答正确':'回答错误'}}
				</view>
			</view>
		</u-popup>
		<gameLoading/>
	</view>
</template>


<script>
	import flipcountdown from '@/components/flipcountdown/flipcountdown.vue'
	let time = null
	let innerAudioContext =null
	export default {
		components: {
			flipcountdown
		},
		data() {
			return {
				cooling: false, //冷却
				formShow: false,
				num: 0,
				resultShow: false,
				answerCode: true,
				answerText: '',
				autoplay: false,
				gameData: {},
				userPeople: {},
				endTime: '',
				gameChall: [],
				quest: {},
				game_config: {},
				quest_time: 0,
				acceptStatus: true
			}
		},
		watch: {
			resultShow() {
				setTimeout(() => {
					this.resultShow = false
				}, 3000)
			},

			quest_time() {
		
				if(!this.quest) return;
					
				innerAudioContext.stop()
				let time1 = Date.parse(new Date()) / 1000
				let time2 = this.game_config.quest_time||time1
				
				// if((time1 - time2)>this.game_config.time) return this.getTimeOut();
				innerAudioContext.src = this.quest.docx;
				innerAudioContext.startTime = time1 - time2 < 0 ? 0 : time1 - time2
				innerAudioContext.play()
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});

				let data = {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					team_id: this.userPeople.teamId
				}
				let that=this
				innerAudioContext.onEnded(() => {
					let url='home/game/activ_quest'
					if(that.userPeople.type==11||that.userPeople.type==12){
						url='home/game/quest_get_bingo'
						data.activ_id= that.game_config.activ_id
						data.status=2
					}
					this.$myRuquestWs(url, data)
				})

			}
		},
		created() {
		innerAudioContext	= uni.createInnerAudioContext();
		},

		mounted() {
			let page = getCurrentPages();
			let currentRoute = page[page.length - 1].route
			uni.$on('onMessage',(res)=>{

				
				if(!this.acceptStatus) return;
					this.$nextTick(()=>{
						this.$store.commit('switchGame', {
							code: false
						})
					})
					if (res.data.code != 202) return;
					this.gameData = res.data.game
					this.gameChall = res.data.game_chall
					this.game_config = res.data.game_config
					this.type = this.game_config.type
					this.quest = res.data.quest_list
					this.teamList = res.data.team
					this.userPeople = res.data.userPeople
					if(res.data.quest_list){
						this.quest_time = res.data.game_config.quest_time||Date.parse(new Date()) / 1000
					}
					
					
					
					if(!res.data.quest_list&&this.userPeople.activ_list&&this.userPeople.cap_zt==2){
						let data = {
							game_id: this.gameData.id,
							activ_id: this.game_config.activ_id,
							team_id: this.userPeople.teamId,
							status:2
						}

						this.$myRuquestWs('home/game/quest_get_bingo', data)
					}
		
					if(this.gameChall){
						this.endTime = this.game_config.time + (+this.gameChall[this.gameChall.length - 1]
						.time) + (this.game_config.time_out||0)
					}
					

					if (this.game_config.status_pop) {
						innerAudioContext.pause()
						// this.autoplay = false
					} else {
						innerAudioContext.play()
						this.autoplay = true
					}
			})
			let game_id = uni.getStorageSync("gameId")
			let userData = uni.getStorageSync("userData")
				if(!this.$ws.socketTask) return this.$ws.init();
			this.$ws.socketTask.send({
				data: JSON.stringify({
					game_id,
					user_id: userData.id
				}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},
		onUnload() {
			this.acceptStatus = false
			// uni.$off('onMessage') 
			console.log('停止')
			innerAudioContext.stop()
			innerAudioContext.destroy();	
			innerAudioContext=null
			
		},

		methods: {

			submit() {
				if (!this.formShow) return;
				let data = {
					game_id: this.gameData.id,
					activ_id: this.gameData.activ_id,
					team_id: this.userPeople.teamId
				}
				this.formShow = false
				clearInterval(time)
				// let time_ = 19 - this.num
				// this.$myRuquest('home/game/time_out', {
				// 	game_id: this.gameData.id,
				// 	activ_id: this.gameData.activ_id,
				// 	time: time_
				// })
				if (this.answerText == this.quest.answer) {

					this.resultShow = true
					this.answerCode = true
					
					let url='home/game/activ_quest'
					if(this.userPeople.type==11||this.userPeople.type==12){
						url='home/game/quest_get_bingo'

						data.activ_id= this.game_config.activ_id
						data.status=1
						this.setFormShow(2)
					}else{
						this.$myRuquest('home/game/quest_correct', data)
					}
					this.$myRuquestWs(url, data)  

				} else {
					//冷却5秒
					this.cooling = true
					setTimeout(() => {
						this.cooling = false
					}, 5000)
					this.resultShow = true
					this.answerCode = false
					this.setFormShow(2)

					// this.$myRuquestWs('home/game/game_pop_end', data)
				}
				this.answerText = ''

			},
			setFormShow(status) {
				if (status==1&&this.cooling) return;
				if (this.userPeople.cap_zt!=2) return ;
				// uni.showToast({
				// 			title: '仅限队长手机操作！',
				// 			icon: 'none'
				// 		});
				if(this.userPeople.type==11||this.userPeople.type==12){
					let data = {
						game_id: this.gameData.id,
						key:this.userPeople.activ_list.key,
						team_id: this.userPeople.teamId,
						status
					}		
					this.$myRuquestWs('home/game/game_pop_go_bingo', data).then(res=>{
						if (status == 1) this.setTime()
					})
				}else{
					let data = {
						game_id: this.gameData.id,
						activ_id: this.gameData.activ_id,
						team_id: this.userPeople.teamId,
						status
					}
					this.$myRuquestWs('home/game/game_pop_go', data).then(res => {
						if (status == 1) this.setTime()
					})
				}
				
				
			},
			setTime() {
				this.num = 19
				time = setInterval(() => {
					this.num--
					if (!this.num) {
						clearInterval(time)
						this.formShow = false
						uni.showToast({
							title: '回答时间到',
							icon: 'none'
						});
						this.setFormShow(2)
					}
				}, 1000)
				this.formShow = true
			},
			getTimeOut() {
				console.log('挑战结束')
				// if (this.game_config.status_pop) return;
				clearInterval(time)
				if(this.userPeople.type==11||this.userPeople.type==12){
					let data = {
						game_id: this.gameData.id,
						key:this.userPeople.activ_list.key,
						team_id: this.userPeople.teamId,
						number:this.gameChall[0].number
					}		
					this.$myRuquestWs('home/game/bingo_do', data)
				}else{
					let data = {
						game_id: this.gameData.id,
						activ_id: this.gameData.activ_id
					}				
					this.$myRuquestWs('home/game/game_pop', data)
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
	}

	.popup_ {
		position: relative;
		width: calc(624vmin / 7.5);
		height: calc(584vmin / 7.5);
	}

	.answerText {
		color: #65CF93;
		font-size: calc(60vmin / 7.5);
		text-align: center;
		position: absolute;
		bottom: calc(100vmin / 7.5);
		left: 50%;
		transform: translateX(-50%);
		font-weight: 700;
	}

	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: calc(80vmin / 7.5) 0;
		
		width:  calc(580vmin / 7.5);

		.btn {
			width: calc(328vmin / 7.5);
			height: calc(328vmin / 7.5);
			border-radius: 50%;
			background-color: #FAD686;
			color: #ffffff;
			font-size: calc(100vmin / 7.5);
			font-weight: 700;
			text-align: center;
			line-height: calc(328vmin / 7.5);
			border: calc(4vmin / 7.5) solid #ffffff;
			box-shadow: 0 0 calc(12vmin / 7.5) calc(12vmin / 7.5) #EBAC20;
			margin: 0 auto;
			animation: breathe 3s ease infinite;
			transition: all .5s;
		}
		@keyframes breathe {
				0%{
					box-shadow: 0 0 calc(2vmin / 7.5) calc(2vmin / 7.5) #EBAC20;
				}
				50%{
					box-shadow: 0 0 calc(60vmin / 7.5) calc(10vmin / 7.5) #EBAC20;
				}
				100%{
					box-shadow: 0 0 calc(2vmin / 7.5) calc(2vmin / 7.5) #EBAC20;
				}
		}

		.btn_ {
			background-color: #999999;
			box-shadow: 0 0 calc(12vmin / 7.5) #666666;
			animation: none;
		}

		.form {
			display: flex;
			align-items: center;
			position: relative;

			input {
				border: calc(2vmin / 7.5) solid #EBAC20;
				padding: calc(12vmin / 7.5);
				border-radius: calc(4vmin / 7.5);
				flex: 1;
			}

			.submit {
				width: calc(152vmin / 7.5);
				height: calc(74vmin / 7.5);
				line-height: calc(74vmin / 7.5);
				text-align: center;
				border-radius: calc(8vmin / 7.5);
				background-color: #EBAC20;
				color: #ffffff;
				margin: 0 calc(30vmin / 7.5);
			}

			.time {
				width: calc(72vmin / 7.5);
				height: calc(72vmin / 7.5);
				line-height: calc(72vmin / 7.5);
				text-align: center;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .23);
				color: #ffffff;
			}
		}
	}

	.right {
		flex: 1;
		padding: calc(120vmin / 7.5) 0;
		display: flex;
		flex-direction: column;
		// justify-content: space-between;

		.team_item {
			width: 100%;
			align-items: center;
			display: flex;
			font-size: calc(36vmin / 7.5);
			font-weight: 700;
			color: #333333;
			margin: calc(10vmin / 7.5) 0;

			image {
				width: calc(94vmin / 7.5);
				height: calc(94vmin / 7.5);
				margin-left: calc(30vmin / 7.5);
			}

			.name {
				flex: 1;
				margin: 0 calc(8vmin / 7.5);
			}

			.score {}
		}
	}


	.turntable {
		position: relative;
		margin: auto;
		display: block;
		margin-top: 20%;
		margin-bottom: 8%;
		width: calc(310vmin / 7.5);
		height: calc(280vmin / 7.5);
		background: #EBAC20;
		border-radius: 5%;
		transform: scale(.5);
		box-shadow: inset 0 0 calc(10vmin / 7.5) rgba(255, 255, 255, 0.7);
	}

	.record {
		position: absolute;
		left: calc(35vmin / 7.5);
		top: calc(35vmin / 7.5);
		width: calc(200vmin / 7.5);
		height: calc(200vmin / 7.5);
		background: black;
		border-radius: 50%;
		animation: spin 1s infinite linear;
	}

	@keyframes spin {
		0% {
			transform: none;
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.record::before {
		content: '';
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		width: calc(180vmin / 7.5);
		height: calc(180vmin / 7.5);
		background: repeating-radial-gradient(black, black calc(5vmin / 7.5), #1C1C1C calc(6vmin / 7.5), #1C1C1C calc(7vmin / 7.5));
		border-radius: 50%;
	}

	.overlay {
		content: '';
		left: calc(35vmin / 7.5);
		top: calc(35vmin / 7.5);
		position: absolute;
		width: calc(200vmin / 7.5);
		height: calc(200vmin / 7.5);
		background: linear-gradient(45deg, transparent, 40%, rgba(255, 255, 255, 0.35), 60%, transparent);
		border-radius: 50%;
	}


	.inner {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: calc(55vmin / 7.5);
		height: calc(55vmin / 7.5);
		background: linear-gradient(white, white 50%, #F796A8 50%, #F796A8);
		border-radius: 50%;
	}

	.inner::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: calc(10vmin / 7.5);
		height: calc(10vmin / 7.5);
		background: black;
		border-radius: 50%;
	}

	.inner::after {
		content: 'One Day';
		width: calc(55vmin / 7.5);
		text-align: center;
		font-family: sans-serif;
		font-size: calc(8vmin / 7.5);
		position: absolute;
		left: 50%;
		top: calc(10vmin / 7.5);
		transform: translateX(-50%);
	}

	.arm-holder {
		position: absolute;
		width: calc(40vmin / 7.5);
		height: calc(40vmin / 7.5);
		background: gray;
		border-radius: 50%;
		right: calc(20vmin / 7.5);
		top: calc(40vmin / 7.5);
	}

	.arm-holder::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(30vmin / 7.5);
		height: calc(30vmin / 7.5);
		background: #939393;
		border-radius: 50%;
	}

	.arm {
		position: absolute;
		right: calc(13vmin / 7.5);
		width: calc(60vmin / 7.5);
		top: calc(10vmin / 7.5);
		height: calc(110vmin / 7.5);
		border: calc(10vmin / 7.5) solid #939393;
		transform: skew(-20deg, -20deg) rotate(-60deg);
		transform-origin: top right;
		border-left-color: transparent;
		border-top-color: transparent;
		border-radius: 0 0 30% 0;
		animation: armTwitch 5s infinite;
		animation-direction: alternate-reverse;
		animation-delay: 2s;
	}

	@keyframes armTwitch {
		0% {
			transform: skew(-20deg, -20deg);
		}

		100% {
			transform: skew(-20deg, -20deg) rotate(1deg);
		}
	}

	.arm::before {
		content: '';
		position: absolute;
		width: calc(20vmin / 7.5);
		height: calc(30vmin / 7.5);
		background: gray;
		transform: skew(20deg, 20deg) rotate(75deg);
		top: calc(98vmin / 7.5);
		left: -calc(10vmin / 7.5);
		border-radius: 20%;
		clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
	}

	.dial {
		position: absolute;
		bottom: calc(20vmin / 7.5);
		right: calc(20vmin / 7.5);
		width: calc(25vmin / 7.5);
		height: calc(25vmin / 7.5);
		background: #333642;
		border-radius: 50%;
	}

	.dial::before {
		content: '';
		left: 50%;
		transform: translateX(-50%);
		top: calc(2vmin / 7.5);
		position: absolute;
		width: calc(2vmin / 7.5);
		height: calc(5vmin / 7.5);
		background: white;
		border-radius: 50%;


	}


	///
</style>
